<template>
	<view>
		<!-- 添加品牌按钮 -->
		<u-button type="primary" @click="goToAddBrand">添加品牌</u-button>
		<u-form :model="form" ref="uForm">


			<block v-if="!isPidProvided">

				<u-form-item label="品牌" prop="cate">
					<u-input v-model="form.cate.name" placeholder="请选择品牌" @click="selectBrand" />
				</u-form-item>
				<u-form-item label="系列" prop="series">
					<u-input v-model="form.series" placeholder="请选择系列" @click="showSeriesPicker = true" />
				</u-form-item>
				<u-form-item label="型号" prop="model">
					<u-input v-model="form.model" placeholder="请输入型号" />
				</u-form-item>

			</block>

			<block v-if="isPidProvided">
				<view class="form-item">
					<view class="form-label">品牌</view>
					<view class="form-value">{{ form.cate.name }}</view>
				</view>
				<view class="form-item">
					<view class="form-label">系列</view>
					<view class="form-value">{{ form.series.name }}</view>
				</view>
				<view class="form-item">
					<view class="form-label">型号</view>
					<view class="form-value">{{ form.model.name }}</view>
				</view>
			</block>


			<u-form-item label="飞控序号" prop="fcSerial" label-width="120">
				<u-input v-model="form.fcSerial" placeholder="请输入飞控序号" />
			</u-form-item>
			<u-form-item label="购买日期" prop="purchaseDate" label-width="120">
				<u-input v-model="form.purchaseDate" placeholder="请选择购买日期" type="select"
					@click="showDatePicker = true" />
			</u-form-item>

			<u-form-item>
				<u-button type="primary" @click="submitForm">提交</u-button>
			</u-form-item>
		</u-form>

		<u-picker v-model="showDatePicker" mode="date" @confirm="onDateConfirm"></u-picker>
		<u-picker v-model="showSeriesPicker" :list="seriesList" @confirm="onSeriesConfirm"></u-picker>
		<u-picker v-model="showDatePicker" mode="date" @confirm="onDateConfirm"></u-picker>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				form: {
					cate: {},
					series: '',
					model: '',
					fcSerial: '',
					purchaseDate: ''
				},
				showDatePicker: false,
				showBrandPicker: false,
				showSeriesPicker: false,
				seriesList: [],
				isPidProvided: false,
				rules: {
					cate: [{
						required: true,
						message: '请选择品牌',
						trigger: 'change'
					}],
					series: [{
						required: true,
						message: '请选择系列',
						trigger: 'change'
					}],
					model: [{
						required: true,
						message: '请输入型号',
						trigger: 'blur'
					}],
					fcSerial: [{
						required: true,
						message: '请输入飞控序号',
						trigger: 'blur'
					}],
					purchaseDate: [{
						required: true,
						message: '请选择购买日期',
						trigger: 'change'
					}]
				}
			};
		},
		onShow() {
			var that = this;
			uni.$on('brandSelected', (data) => {

				console.log(data)
				this.form.brand = data;

				// const brand = JSON.parse(data);
				// console.log(brand);
				// this.form.brand =JSON.parse( data);
				// console.log( this.form.brand.id);
				// this.loadSeries(brand.id);
			});

		},
		onLoad(options) {
			//console.log(options);
			if (options.pid) {
				try {
					const decodedData = JSON.parse(decodeURIComponent(options.pid));
					console.log(decodedData);
					this.form = decodedData;
					this.isPidProvided = true;
				} catch (error) {
					console.error('解码 JSON 数据失败', error);
					toast('解码 JSON 数据失败');
				}
			}
		},
		methods: {
			// 跳转到添加品牌页面
			goToAddBrand() {
				uni.navigateTo({
					url: '/pages/wurenji/addbrand', // 替换为你的页面路径
				});
			},
			selectBrand() {
				//this.$u.route('/pages/wurenji/brandselect');

				uni.navigateTo({
					url: '/pages/wurenji/brandselect'
				});
			},
			onSeriesConfirm(e) {
				this.form.series = e.value;
			},
			onDateConfirm(e) {
				this.form.purchaseDate = `${e.year}-${e.month}-${e.day}`;
			},
			loadSeries(brand) {
				// 从远程接口获取系列数据
				uni.request({
					url: 'https://your-api-endpoint/series', // 替换为实际的API地址
					data: {
						brand: brand
					},
					success: (res) => {
						if (res.data && res.data.success) {
							this.seriesList = res.data.series.map(series => ({
								value: series.id,
								label: series.name
							}));
							this.showSeriesPicker = true;
						} else {
							console.error('获取系列失败', res.data.message);
						}
					},
					fail: (err) => {
						console.error('请求失败', err);
					}
				});
			},

			submitForm() {
				this.$refs.uForm.validate(valid => {
					if (valid) {
						console.log('验证通过', this.form);
						// 提交数据到后台接口
						this.$api.addpinpaiuav(this.form).then(res => {
							console.log(res);
						 
							if (res.code == 1) {
								 
							}
						}).catch(error => {
							console.error('提交失败', error);
							toast('提交失败');
						});
					} else {
						console.log('验证失败');
						toast('请填写完整信息');
					}
				});
			},

		}
	};
</script>

<style>
	.form-block {
		margin: 20px;
	}

	.form-item {
		display: flex;
		align-items: center;
		margin-bottom: 15px;
	}

	.form-label {
		width: 160rpx;
		margin-left: 10px;
	}

	.form-value {
		flex: 1;
		padding: 10px;
		border: 1px solid #ccc;
		border-radius: 5px;
	}
</style>